<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分享菜单</title>

    <style>
        #box {
            width: 100px;
            height: 400px;
            position: absolute;
            left: -100px;
            bottom: 100px;
            background-color: antiquewhite;
        }
        
        span {
            display: inline-block;
            width: 20px;
            height: 100px;
            padding: 10px;
            background-color: red;
            position: absolute;
            left: 100px;
            cursor: pointer;
            bottom: 120px;
        }
    </style>

</head>

<body>

    <div id="box">
        <span id="s">分享</span>
    </div>

</body>


<script>
    var time = null;
    var box = document.getElementById('box');

    box.onmouseenter = function() {
        statrMove(5, 0);
    };
    box.onmouseleave = function() {
        statrMove(-5, -100);
    };


    var time = null;

    function statrMove(speed, targer) {
        clearInterval(time);
        time = setInterval(function() {
            if (box.offsetLeft == targer) {
                clearInterval(time);
            } else {
                box.style.left = (box.offsetLeft + speed) + 'px';
            }
        }, 30);
    }
</script>

</html>